import React from "react";
import { Button, DatePicker } from "antd";

// 类组件继承 React.Component
class VoiceBroadcast extends React.Component {
   // 为 props 设置默认值
  static defaultProps = {
    name: "默认标题", // 如果父组件没传 name，就用这个值

  };
  // 1. 构造函数（初始化状态和绑定this）
  constructor(props) {
    super(props); // 必须调用父类构造函数，传入props
    // 初始化状态（state）
    this.state = {
      count: 0,
      message: "Hello, Class Component",
      time: null,
      timeStr:null,
    };
    // 绑定自定义方法的this（否则this指向会丢失）
    this.handleClick = this.handleClick.bind(this);
  }

  // 2. 自定义方法（处理事件或业务逻辑）
  handleClick() {
    // 更新状态（必须用setState，不能直接修改this.state）
    this.setState({
      count: this.state.count + 1,
    });
  }

  onChangeTime = (date,dateString) => {
    this.setState({
      time: date,
      timeStr:dateString
    });
  };
  // 3. 生命周期方法（可选）
  // 组件挂载后执行（类似useEffect的空依赖）
  componentDidMount() {
    console.log("组件已挂载");
  }

  // 组件更新后执行（类似useEffect的依赖变化）
  componentDidUpdate(prevProps, prevState) {
    console.log("组件已更新");
    // 避免无限循环：只有当count变化时才执行某些操作
    if (prevState.count !== this.state.count) {
      console.log("count变化了：", this.state.count);
    }
  }

  // 组件卸载前执行（清理副作用）
  componentWillUnmount() {
    console.log("组件即将卸载");
  }

  // 4. 渲染方法（必须实现，返回JSX）
  render() {
    // 从state和props中解构数据
    const { count, message,timeStr } = this.state;
    const { name } = this.props; // 接收父组件传入的props

    // 返回JSX（类似函数组件的返回值）
    return (
      <div>
        <h2>{name}</h2>
        <p>{message}</p>
        <p>点击次数：{count}</p>
        <Button onClick={this.handleClick} type="primary">
          点击增加
        </Button>
        <br />
       <p>选中时间: {timeStr}</p>
       <p>选中时间: {this.state.timeStr}</p>

        <DatePicker value={this.time} onChange={this.onChangeTime}></DatePicker>
      </div>
    );
  }
}

// 导出组件
export default VoiceBroadcast;
